<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<y-bread :name="pageName"></y-bread>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<leo-tree :data="treeData" @node-click="nodeClick"></leo-tree>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		recommendmap
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.tjt'),
				x: 0,
				y: 0,
				movableStyle: '',
				treeData: []
			}
		},
		onReady() {
			this.recommendmap()
		},
		onLoad() {

		},
		methods: {
			recommendmap() {
				recommendmap().then(res => {
					if (res.code == 0) {
						this.treeData = res.data
					}
				})
			},
			nodeClick(e) {},
			chooseItem(item) {
				var that = this
				that.treeData = []
				// {
				// 	id: 10,
				// 	name: 'node22222',
				// 	children: [{
				// 			id: 11,
				// 			name: 'Node 111',
				// 			children: [null, null]
				// 		},
				// 		{
				// 			id: 2,
				// 			name: 'Node 2',
				// 			children: [{
				// 					id: 21,
				// 					name: 'Node 2.1',
				// 					children: [null, null, null]
				// 				},
				// 				{
				// 					id: 22,
				// 					name: 'Node 2.2',
				// 					children: [null, null, null]
				// 				}
				// 			]
				// 		}
				// 	]
				// }
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	movable-area {
		width: 100%;
		height: 80vh;
		overflow: hidden;
	}


	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}

	.dig-container {
		display: inline-block;
		padding: 15px;
		background-color: #fff;
	}

	.dig {
		display: table;
		text-align: center;
	}

	.dig:after,
	.dig:before {
		content: "";
		display: table;
	}

	.dig-node,
	.dig-node-children {
		position: relative;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.dig>.dig-node {
		padding-top: 0;
	}

	.dig-node {
		padding-top: 20px;
		display: table-cell;
		vertical-align: top;
	}

	.dig:after {
		clear: both;
	}

	.dig-node-label {
		position: relative;
		background-color: #f1f1f1;
		display: inline-block;
	}

	.dig-node.collapsed,
	.dig-node.is-leaf {
		padding-left: 10px;
		padding-right: 10px;
	}

	.dig-node-children:before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 0;
		height: 20px;
		border-left: 1px solid #ddd;
	}

	.dig-node-children {
		padding-top: 20px;
		display: table;
	}

	.dig-node:after,
	.dig-node:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 19px;
	}

	.dig-node:after {
		left: 50%;
		border-left: 1px solid #ddd;
	}

	.dig-node:not(:first-child):before,
	.dig-node:not(:last-child):after {
		border-top: 1px solid #ddd;
	}

	.dig-node-label-inner {
		padding: 10px 15px;
		box-shadow: 0 1px 5px #00000015;
	}

	.dig-node-label-info {
		min-width: 132px;
		height: 92px;
	}

	.dig-info-span {
		display: inline-block;
		margin-left: 10px;
	}

	.dig>.dig-node:after {
		border-left: 0;
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;
			}
		}

		.orderbox .orderitem button {
			font-size: 12px;
		}
	}
</style>